{extend name="$_admin_public_base_"/} 
{block name="style"}
<!--自定义加载style-->
<link href="__LIBS__/bootstrap-table/bootstrap-table.min.css" type="text/css" rel="stylesheet">
<!-- <link type="text/css" rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css"/> -->
{/block} {block name="main"}
<!-- 工具栏按钮 -->


<div id="toolbar">
    <button title="删除" target-form="ids" icon="fa fa-trash" class="btn btn-danger btn-sm" onclick="rmFromGroup()" primary-key="uid">
        <i class="fa fa-trash"></i> 踢出</button>&nbsp;
</div>
<div id="toolbar2">
    <button title="添加" icon="fa fa-user-plus" class="btn btn-primary  btn-sm" onclick="addToGroup()" primary-key="uid">
        <i class="fa fa-plus"></i> 加入</button>&nbsp;
</div>

<div class="row">

    <div class="builder-table">
        <!-- 数据列表 -->
        <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                {$meta_title}成员
            </div>
            <div class="panel-body">

            <table class="bootstrap-table col-sm-4" id="mytable"></table>
            <input type="hidden" id="group_id" value="{:input('param.group_id')}">
            </div>
        </div>
        </div>
    </div>

    <div class="builder-table">
            <!-- 数据列表 -->
            <div class="col-sm-6">

            <div class="panel panel-default">
                <div class="panel-heading">
                    非{$meta_title}成员
                </div>
                <div class="panel-body">

                <table class="bootstrap-table col-sm-4" id="mytable2"></table>
                <input type="hidden" id="group_id" value="{:input('param.group_id')}">
                </div>
                </div>

            </div>
        </div>
</div>

{/block} {block name="script"}
<!--自定义加载javascript-->
<!-- <script type="text/javascript" src="__PUBLIC__/js/jquery-1.10.2.min.js"></script> -->
<!-- <script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="__LIBS__/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="__LIBS__/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    group_id = $('#group_id').val();
    $('#mytable').bootstrapTable({
        url: "/admin.php/admin/group/rolemember.html?group_id=" + group_id,

        pagination: true,
        dataField: 'total',
        pageList: [10, 20 ,50],
        columns: [
            {
                checkbox: true
            },
            {
                field: 'uid',
                title: 'UID',
                //checkbox:true
            }, {
                field: 'username',
                title: '用户名'
            }, {
                field: 'nickname',
                title: '名称'
            },
        ],
        height: 560,
        search: true,
        showColumns: true,
        showToggle: true,
        idFieldId: 'uid',
        clickToSelect: true,
        toolbar: '#toolbar'
    })

     $('#mytable2').bootstrapTable({
            url: "/admin.php/admin/group/notrolemember.html?group_id=" + group_id,

            pagination: true,
            dataField: 'total',
            pageList: [10, 20,50],
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'uid',
                    title: 'UID',
                    //checkbox:true
                }, {
                    field: 'username',
                    title: '用户名'
                }, {
                     field: 'nickname',
                     title: '名称'
                },
            ],
            height: 560,
            search: true,
            showColumns: true,
            showToggle: true,
            idFieldId: 'uid',
            clickToSelect: true,
            toolbar: '#toolbar2'
        })
    function addToGroup() {
        selections = $('#mytable2').bootstrapTable('getSelections');
        if (selections) {
            var arr = [];
            for (var i = 0, len = selections.length; i < len; i++) {
                arr.push(selections[i].uid);
            }

            $.post("{:url('batchadd')}", { 'uids[]': arr, 'group_id': group_id },
            function(rdata) {
                $('#mytable').bootstrapTable('refresh');
                $('#mytable2').bootstrapTable('refresh');
            });
        }
    }
    function rmFromGroup() {
        selections = $('#mytable').bootstrapTable('getSelections');
                if (selections) {
                    var arr = [];
                    for (var i = 0, len = selections.length; i < len; i++) {
                        arr.push(selections[i].uid);
                    }

                    $.post("{:url('batchrm')}", { 'uids[]': arr, 'group_id': group_id },
                    function(rdata) {
                        $('#mytable').bootstrapTable('refresh');
                        $('#mytable2').bootstrapTable('refresh');
                    });
                }
    }

</script> {/block}





<!-- 
<html>
<body>

<head>
<link href="__LIBS__/bootstrap-table/bootstrap-table.min.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css"/>

</head>
<table class="bootstrap-table col-sm-12" id="mytable"></table>
<input type="hidden" id="group_id" value="{:input('param.group_id')}">
<script type="javascript">


</script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__LIBS__/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="__LIBS__/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

</body>
</html> -->